import QtQuick
import QtQuick.Controls

Item {
    id: control
    property bool highlights: false
    property string text: "text"
    property bool playAnimation: false
    width: 122
    height: 36
    FontLoader{
        id: boldFont
        source:"fonts/SourceHanSansCN-Bold.otf"
    }

    SequentialAnimation{
        running: control.playAnimation
        loops: Animation.Infinite
        PropertyAnimation{
            target: control
            property: "highlights"
            from: false
            to: true
            duration: 500
        }
        PropertyAnimation{
            target: control
            property: "highlights"
            from: true
            to: false
            duration: 500
        }
    }

    Image {
        id: image
        anchors.fill: parent
        source: "images/step-node-hovered.png"
        fillMode: Image.Stretch
    }
    Text{
        id: contentText
        anchors.fill: parent
        anchors.leftMargin: 20
        anchors.rightMargin: 20
        font.pixelSize: 14
        font.family: boldFont.name
        font.weight: Font.Medium
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        wrapMode: Text.WordWrap
        color:"#ffffff"
        text: control.text
    }

    states:[
        State{
            name: "highlights"
            when: control.highlights
            PropertyChanges {
                image{
                    source:"images/step-node-hovered.png"
                }
                contentText{
                    color: "#FFFFFF"
                }
            }
        },
        State{
            name: "normal"
            when: !control.highlights
            PropertyChanges {
                image{
                    source:"images/step-node-normal.png"
                }
                contentText{
                    color: "#CEDCE6"
                }
            }
        }
    ]
}
